import React, { useState } from 'react';
import { NavBar, Sidebar, IndexBar, Cell } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import './index.less';

// 定义药品类型接口
interface Medicine {
    id: string;
    name: string;
    description?: string;
    image?: string;
}

// 定义分类接口
interface Category {
    id: string;
    name: string;
    medicines: Medicine[];
}

// 模拟数据
const categories: Category[] = [
    {
        id: '1',
        name: '常见病症',
        medicines: [
            { id: '1-1', name: '感冒用药', description: '用于感冒发热、咳嗽等症状' },
            { id: '1-2', name: '风湿骨伤', description: '用于风湿疼痛、骨伤等症状' },
            { id: '1-3', name: '两性健康', description: '用于两性相关健康问题' },
        ]
    },
    {
        id: '2',
        name: '儿童用药',
        medicines: [
            { id: '2-1', name: '小儿感冒颗粒', description: '用于小儿感冒发热' },
            { id: '2-2', name: '小儿止咳糖浆', description: '用于小儿咳嗽' },
            { id: '2-3', name: '小儿退热贴', description: '用于小儿发热' },
        ]
    },
    {
        id: '3',
        name: '三高用药',
        medicines: [
            { id: '3-1', name: '降压药', description: '用于高血压' },
            { id: '3-2', name: '降糖药', description: '用于糖尿病' },
            { id: '3-3', name: '降脂药', description: '用于高血脂' },
        ]
    },
    {
        id: '4',
        name: '其它药品',
        medicines: [
            { id: '4-1', name: '维生素', description: '补充维生素' },
            { id: '4-2', name: '钙片', description: '补充钙质' },
            { id: '4-3', name: '消炎药', description: '用于炎症' },
        ]
    },
];

// 科室数据
const departments = [
    { id: '1', name: '内科', diseases: ['肺炎哮喘', '胃痛（腹泻痛）'] },
    { id: '2', name: '眼科', diseases: ['结膜炎', '慢性肝炎'] },
    { id: '3', name: '骨科', diseases: ['长期便秘', '锌缺乏'] },
    { id: '4', name: '小儿科', diseases: ['反复外感发热', '新生儿肺炎'] },
    { id: '5', name: '急诊科', diseases: ['化脓性腮腺炎', '发热伴抽搐'] },
    { id: '6', name: '皮肤科', diseases: ['感冒（急性上呼吸感染）'] },
    { id: '7', name: '耳鼻喉科', diseases: ['反复外感发热', '新生儿肺炎'] },
    { id: '8', name: '神经科', diseases: ['小儿厌食症', '消化性溃疡'] },
];

const HealthStore: React.FC = () => {
    const navigate = useNavigate();
    const [activeKey, setActiveKey] = useState(0);
    const [showIndexBar, setShowIndexBar] = useState(false);

    const handleBack = () => {
        navigate(-1);
    };

    const toggleView = () => {
        setShowIndexBar(!showIndexBar);
    };

    return (
        <div className="health-store">
            <NavBar
                title="健康商店"
                leftText="返回"
                onClickLeft={handleBack}
                rightText={showIndexBar ? "分类视图" : "科室视图"}
                onClickRight={toggleView}
            />

            <div className="content">
                {!showIndexBar ? (
                    <div className="category-view">
                        <Sidebar
                            value={activeKey}
                            onChange={setActiveKey}
                        >
                            {categories.map((category) => (
                                <Sidebar.Item
                                    key={category.id}
                                    title={category.name}
                                />
                            ))}
                        </Sidebar>
                        <div className="medicine-list">
                            {categories[activeKey]?.medicines.map((medicine) => (
                                <Cell
                                    key={medicine.id}
                                    title={medicine.name}
                                    label={medicine.description}
                                    isLink
                                />
                            ))}
                        </div>
                    </div>
                ) : (
                    <div className="department-view">
                        <IndexBar>
                            {departments.map((dept) => (
                                <IndexBar.Anchor key={dept.id} index={dept.name}>
                                    <Cell title={dept.name} />
                                    {dept.diseases.map((disease, index) => (
                                        <Cell
                                            key={index}
                                            title={disease}
                                            isLink
                                        />
                                    ))}
                                </IndexBar.Anchor>
                            ))}
                        </IndexBar>
                    </div>
                )}
            </div>
        </div>
    );
};

export default HealthStore; 